<template>
  <div class="order_page">
    <ul>
      <li v-for="(item,index) in shopData"
          :key="index">
        <img :src="url+item.shopimg"
             alt="">
        <div class="order_right">
          <div class="order_con">
            <div class="order_head">
              <h5>{{item.shopname}}
                <i class="iconfont icon-fanhui1"></i>
              </h5>
              <p>支付完成</p>
            </div>
            <p class="now">2021年2月2日11:07</p>
          </div>

          <div class="order_basket">
            <p class="neirong">{{item.diancan}}</p>
            <p class="jiage">￥{{item.zongjia}}</p>
          </div>
          <div class="order_again">
            <span>再来一单</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Order',
  data () {
    return {
      url: '//elm.cangdu.org/img/',
      shopData: [],
    }
  },
  created () {
    // console.log(JSON.parse(localStorage.getItem('shopinfor')));
    this.shopData = JSON.parse(localStorage.getItem('shopinfor'));
    for (let i in this.shopData) {
      this.shopData[i].shopimg = this.shopData[i].shopimg.replace("\"", "").replace("\"", "");
      this.shopData[i].diancan = this.shopData[i].diancan.replace("\"", "").replace("\"", "");
    }
    console.log(this.shopData)
  },
}
</script>

 <style lang="less">
body {
  background-color: #f5f5f5;
}

.order_page {
  ul {
    padding: 15px;
    padding-bottom: 0;
    background-color: white;
    li {
      display: flex;
      margin-bottom: 10px;
      img {
        width: 46px;
        height: 46px;
      }

      .order_right {
        flex: 5;
        margin-left: 10px;
        .order_con {
          border-bottom: 0.1px solid #f5f5f5;
          padding-bottom: 5px;

          .order_head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            h5 {
              font-size: 17px;
              color: #333;
              font-weight: normal;
              i {
                font-size: 12px;
                color: #999;
              }
            }
            p {
              font-size: 14px;
              color: #333;
            }
          }
          .now {
            font-size: 12px;
            color: #999;
          }
        }
        .order_basket {
          display: flex;
          justify-content: space-between;
          line-height: 40px;
          border-bottom: 0.1px solid #f5f5f5;
          font-size: 16px;
          .neirong {
            color: #666;
          }
          .jiage {
            color: #ff6600;
          }
        }
        .order_again {
          text-align: right;
          font-size: 14px;
          color: #3190e8;
          line-height: 40px;
          span {
            padding: 2px 4.7px;
            border: 0.1px solid #3190e8;
            border-radius: 5px;
          }
        }
      }
    }
  }
}
</style>